use:tooltip

Posted on 2023-04-03 by

henrikvilhelmberglund

This is an example of use:tooltip which changes the tooltip displayed when hovering over an element.

With HTML you can have a tooltip with a title="" attribute on an element. For example:

Hover me

<h1 title="this is a tooltip">Hover me</h1>

But we would like something more fancy. First let's write it as a component and then we'll refactor it to an action .

This is our Tooltip component!

Hello world!

<script>
	import Tooltip from "./Tooltip.svelte";
</script>

<Tooltip title="This is a greeting">
	<h1>Hello world!</h1>
</Tooltip>

<!-- adding some room to display the tooltip -->
<div class="pt-12" />

Now let's rewrite it as an action.

This is our tooltip action!

Hello world!

<script>
	import { tooltip } from "./tooltip.js";
</script>

<h1 title="This is a greeting" use:tooltip>Hello world!</h1>

<!-- adding some room to display the tooltip -->
<div class="pt-12" />

<!-- no idea how to add the UnoCSS classes in the .js file itself -->
<style>
	:global(.my-tooltip) {
		@apply "border-1 shadow-2xl" absolute rounded-lg border-solid border-slate-300 bg-white p-4 shadow-lg;
	}
</style>

There is also a third way, we can use both a component and an action!

This is our component and action combined!

Hello world!

<script>
	import { tooltip } from "./tooltip2.js";
</script>

<h1 title="This is a greeting" use:tooltip>Hello world!</h1>

<!-- adding some room to display the tooltip -->
<div class="pt-12" />